<template>
  <el-select :value="valueTitle" @clear="clearHandle">
    <el-input
      class="selectInput"
      v-model="filterText">
    </el-input>
    <el-option :value="valueTitle" :label="valueTitle" class="options">
      <el-tree  id="tree-option" style="max-height: 200px"
        show-checkbox
        lazy
        :load="loadNode"
        ref="selectTree"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="handleNodeClick">
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>/* eslint-disable */
export default {
  name: 'pig-tree',
  props: ['filter'],
  data () {
    return {
      filter: '3',
      filterText: '',
      valueTitle: '',
      houses: [],
      defaultProps: {
          children: 'children',
          label: 'name'
        }
    }
  },
  mounted(){
    this.loadHouse(1)

    this.initHandle()

  },
  methods: {
    // 初始化值
    initHandle(){
      if(this.valueId){
        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
        this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
        this.defaultExpandedKey = [this.valueId]      // 设置默认展开
      }
      this.initScroll()
    },
    // 初始化滚动条
    initScroll(){
      this.$nextTick(()=>{
        let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
        let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
        scrollBar.forEach(ele => ele.style.width = 0)
      })
    },
    // 切换选项
    handleNodeClick(node){
      if(node.earmark != undefined) {
        this.valueTitle = node['name']
      }

    },
    // 清除选中
    clearHandle(){
      this.valueTitle = ''
      this.valueId = null
      this.defaultExpandedKey = []
      this.clearSelected()
      this.$emit('getValue',null)
    },
    /* 清空选中样式 */
    clearSelected(){
      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element)=>element.classList.remove('is-current'))
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    loadNode(node, resolve) {
      if(node.level == 0) {
        this.loadHouse(1, resolve);
      }
      else if(node.level == 1) {
        if(this.filter == 0) {
          this.loadBreed(node.data, resolve);
        } else if (this.filter == 1) {
          this.loadGrowth(node.data, resolve);
        } else {
          this.loadBreed(node.data, resolve);

          this.loadGrowth(node.data, resolve);
        }

      } else {
        return resolve([])
      }
    },
    loadHouse(type, resolve) {
      let that = this;
      this.$http.get(
        '/basic/house/all',
        {
          params: {
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          that.houses = []
        }
        that.houses = res.data
        resolve(that.houses)
      }).catch(() => {
      })
    },
    loadBreed(house, resolve) {
      let that = this
      this.$http.get(
        '/stock/pig/page',
        {
          params: {
            page: 1,
            limit: 2000,
            houseId: house.id
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          this.dataList = []
          this.total = 0

          resolve([])
          //return this.$message.error(res.msg)
        }
        if(res.data.total != 0) {
          house.children = res.data.list;
          house.children.forEach(function(breed){
            breed.name = breed.earmark
          });

          resolve(house.children)
        }
        else{
          resolve([])
        }
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    loadGrowth(house, resolve) {
      let that = this
      this.$http.get(
        '/stock/piggrowth/page',
        {
          params: {
            page: 1,
            limit: 2000,
            houseId: house.id
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          that.dataList = []
          that.total = 0
          resolve([])
          //return this.$message.error(res.msg)
        }
        house.children = []
        if(res.data.total != 0) {
          house.children = res.data.list;
          house.children.forEach(function(grid){
            grid.name = grid.grid + " 日龄" + grid.agePlus + "共" + grid.mounts + "头"
          });

          resolve(house.children)
        }
        else
        {
          resolve([])
        }
      }).catch(() => {
        this.dataListLoading = false
      })
    }
  },
  watch: {
    value(){
      this.valueId = this.value
      this.initHandle()
    },
    filterText(val) {
      this.$refs.selectTree.filter(val);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
  ul li >>>.el-tree .el-tree-node__content{
    height:auto;
    padding: 0 20px;
  }
  .el-tree-node__label{
    font-weight: normal;
  }
  .el-tree >>>.is-current .el-tree-node__label{
    color: #409EFF;
    font-weight: 700;
  }
  .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
    color:#606266;
    font-weight: normal;
  }
  .selectInput{
    padding: 0 5px;
    box-sizing: border-box;
  }

/deep/ .el-tree {
    padding-top: 15px;
    padding-left: 10px;
    // 不可全选样式
    .el-tree-node {
        .is-leaf + .el-checkbox .el-checkbox__inner {
            display: inline-block;
        }
        .el-checkbox .el-checkbox__inner {
            display: none;
        }
    }
}

>>> .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{display: inline-block;}
>>> .el-tree .el-tree-node .el-checkbox .el-checkbox__inner{display: none;}
</style>
